<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>

    <th:block th:include="central/include :: header('系统首页')" />
    <th:block th:include="include :: vue2-org-tree-css" />
    <!--    <link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/font-awesome.min.css?v=4.7.2}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.18.3}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/animate.min.css?v=20210831}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/style.min.css?v=20210831}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.2}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/plugins/bootstrap-input-spinner/index.css}" rel="stylesheet"/>-->

    <!--    <link th:href="@{favicon.ico}" rel="shortcut icon"/>-->
    <!--    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/animate.min.css}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/style.min.css}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/css/skins.css}" rel="stylesheet"/>-->
    <!--    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.2}" rel="stylesheet"/>-->
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #container {
            position: relative;
            padding: 20px;
            height: 50px;
        }

        #left_side {
            position: absolute;
            top: 20px;
            left: 20px;
            border: solid 0px #e7eaec;
            width: 200px;
            height: 100%;
        }

        #content {
            margin: 0px 210px 0px 210px;
            border: solid 0px #e7eaec;
            height: 100%;
            font-size:35px;
            text-align: center;
        }

        #right_side {
            position: absolute;
            top: 20px;
            right: 20px;
            border: solid 0px #e7eaec;
            width: 170px;
            height: 100%;
            font-size: medium;
            text-align: center;
        }
        .area {
            height: 700px;
            margin: 20px 20px 20px 20px;
        }
        .areaLineList {
            height: 350px;
            background-color: white;
            padding: 20px;
        }

        .operationStationsContainer {
            height: 100%;
            border-radius: 3px;
            border: solid 1px gray;
            margin: 0px;
        }

        .area1{
            width:calc( calc(100% - 10px)/8 );
            position: relative;
        }
        .area2{
            width:calc(calc(100% - 20px) /4);
            position: relative;
        }
        .area3{
            width: calc(calc(100% - 40px) /2);
            position: relative;
        }
        .area4{
            width: calc(calc(100% - 20px) /2);
            position: relative;
        }
        .areaContent{
            display: inline-block;
            height: 100%;
            border-radius: 3px;
            border: solid 1px gray;
        }
        .areacontentbottom{
            position:absolute;
            height: 70px;
            width: 100%;
            background-color: transparent;
            border-top: solid 1px #e7eaec;
            bottom: 0px;
            line-height: 70px;
            text-align: center;
            font-weight: 800;
            font-family:Arial,sans-serif;
        }
        .areacontenttop{
            position:relative;
            height: calc(100% - 72px);
            padding: 0px;
            width: 100%;
            top: 0px;
        }
        .areacontenttopitem{
            height: calc(100% - 10px);
            background-color: white;
            position: absolute;
            border: solid 1px #e7eaec;
            top: 5px;
        }
        .operationStationsItem{
            padding: 5px;
            margin: 0px;
            height: calc(100% - 72px);
        }
        .operationStationsItemContainer{
            background-color: white;
            border: solid 1px #e7eaec;
            width: 100%;
            height: 100%;
        }
        .operationStationsItemHead{
            margin: 0px;
        }
        .operationStationsItemHead>div{
            padding: 0px;
        }
        .title_head{
            position:absolute;
            text-align: left;
            height: 30px;
            padding: 0px;
            top: 5px;
            width: 100% ;
        }
        .info{
            margin: 0px;
            height: calc(100% - 45px);
        }
        .cellhead{
            /*width: 50%;height: 85px;float: left*/
            padding: 0px;
        }
        .cell{
            border-radius: 3px;
            margin: 0 auto;
            width:60px;
            height:60px;
            background-color: gray;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        .processinfo{

            border: solid 1px #e7eaec;
            border-radius: 3px;
            background-color: green;
            text-align: center;
            color: white;
            font-size: small;
        }
        p{
            text-align: center;
            margin: 0px;
        }
        .cellhead {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div th:replace="central/header::header('集合管控系统')"></div>
    <div class="ibox-content" id="app">
        <div class="row">
            <div class="area">
                <div class="areaLineList" >
                    <template v-for="(area,index) in areaList">
                        <div :class="'areaContent area'+area.operationStations.length" v-render="area.id" >
                            <div class="operationStationsContainer row">
                                <template v-for="(operationStation,index1) in area.operationStations" >
                                    <div :class="'operationStationsItem col-sm-'+12/area.operationStations.length" >
                                        <div class="operationStationsItemContainer">
                                            <div style="height:40px;">
                                                <div class="operationStationsItemHead row">
                                                    <div class="col-sm-6"  >{{operationStation.name}}</div>
                                                    <div class="processinfo col-sm-6">{{operationStation.taskStatus|echoDictLabel(taskStatusMap)}}</div>
                                                </div>
                                            </div>
                                            <div class="info row">
                                                <div class="cellhead col-sm-6">
                                                    <p>产品编号</p>
                                                    <div class="cell">
                                                        <el-tooltip effect="dark" :content="operationStation.materialNo|formatData" placement="top">
                                                            <span>{{operationStation.materialNo|formatData}}</span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                                <div class="cellhead col-sm-6">
                                                    <p>产品批次号</p>
                                                    <div class="cell">
                                                        <el-tooltip effect="dark" :content="operationStation.batchNo|formatData" placement="top">
                                                            <span>{{operationStation.batchNo|formatData}}</span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                                <div class="cellhead col-sm-6">
                                                    <p>当前工序</p>
                                                    <div class="cell">
                                                        <el-tooltip effect="dark" :content="operationStation.processStepName|formatData" placement="top">
                                                            <span>{{operationStation.processStepName|formatData}}</span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                                <div class="cellhead col-sm-6">
                                                    <p>加工时长</p>
                                                    <div class="cell">
                                                        <el-tooltip effect="dark" :content="operationStation.processingTime|formatData" placement="top">
                                                            <span>{{operationStation.processingTime|formatData}}</span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div class="areacontentbottom">{{area.name}}</div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="central/include :: footer" />
<th:block th:include="include :: vue2-org-tree-js" />
<script th:inline="javascript">

    const prefix = ctx+"operationStation"

    let areaOfColorDatas = [[${@dict.getType('area_of_color')}]];
    let taskStatusDatas = [[${@dict.getType('sys_task_status')}]];

    const vm  = new Vue({
        el:'#app',
        data(){
            return{
                areaList:[],
                areaOfColorMap:new Map(),
                taskStatusMap:new Map(),
            }
        },methods:{
            getAreaOperationStation() {
                $.axiosRequest.get(prefix+"/list")
                    .then(res=>{
                        let data = res.data
                        this.areaList = data
                    })
            }
        },filters:{
            //data 为字段 map对象
            echoDictLabel(key,data,defaultValue='无'){
                if(data.has(key))
                    return data.get(key)
                return defaultValue
            },formatData(value,defaultValue='无'){
                if(value){
                    return value
                }
                return defaultValue
            }
        },directives:{
            render(el,binding,vnode){
                const {value} =binding
                if(value){
                    const areaOfColorMap = vm.$data.areaOfColorMap
                    el.style.backgroundColor = areaOfColorMap.get(value.toString()).cssClass
                }
            }
        },created(){
            this.getAreaOperationStation()
            areaOfColorDatas.forEach((item)=>this.areaOfColorMap.set(item.dictValue,item))
            taskStatusDatas.forEach((item)=>this.taskStatusMap.set(item.dictValue,item))
        }
    })



</script>

</body>
</html>

